<template>
  <div class="notifications">
    <!-- 顶部标题 -->
    <header class="page-header">
      <div class="header-content">
        <button @click="goBack" class="back-button">
          <i class="fas fa-arrow-left"></i>
        </button>
        <h1 class="page-title">消息通知</h1>
        <button @click="markAllRead" class="mark-all-read">
          全部已读
        </button>
      </div>
    </header>

    <!-- 通知筛选 -->
    <div class="filter-tabs">
      <button 
        v-for="tab in filterTabs" 
        :key="tab.key"
        @click="activeFilter = tab.key"
        :class="['filter-tab', { active: activeFilter === tab.key }]"
      >
        {{ tab.name }}
        <span v-if="tab.count > 0" class="count-badge">{{ tab.count }}</span>
      </button>
    </div>

    <!-- 通知列表 -->
    <div class="notifications-list">
      <div 
        v-for="notification in filteredNotifications" 
        :key="notification.id"
        :class="['notification-item', { unread: !notification.read }]"
        @click="markAsRead(notification)"
      >
        <div class="notification-icon" :class="notification.type">
          <i :class="getNotificationIcon(notification.type)"></i>
        </div>
        
        <div class="notification-content">
          <div class="notification-title">{{ notification.title }}</div>
          <div class="notification-message">{{ notification.message }}</div>
          <div class="notification-time">{{ formatTime(notification.time) }}</div>
        </div>
        
        <div v-if="!notification.read" class="unread-dot"></div>
      </div>

      <!-- 空状态 -->
      <div v-if="filteredNotifications.length === 0" class="empty-state">
        <div class="empty-icon">
          <i class="fas fa-bell-slash"></i>
        </div>
        <h3>暂无通知</h3>
        <p>当前没有{{ getFilterName() }}通知</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'

dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

export default {
  name: 'ClientNotifications',
  setup() {
    const router = useRouter()
    const activeFilter = ref('all')
    
    // 筛选选项
    const filterTabs = ref([
      { key: 'all', name: '全部', count: 0 },
      { key: 'case', name: '案件', count: 0 },
      { key: 'appointment', name: '预约', count: 0 },
      { key: 'system', name: '系统', count: 0 }
    ])
    
    // 交通事故案件通知数据
    const notifications = ref([
      {
        id: 1,
        type: 'case',
        title: '伤残鉴定结果通知',
        message: '您的交通事故伤残鉴定已完成，鉴定为九级伤残，请查收鉴定报告',
        time: '2024-02-16 16:30:00',
        read: false
      },
      {
        id: 2,
        type: 'appointment',
        title: '预约提醒',
        message: '您预约的律师咨询将在明天下午2点开始，请准时参加',
        time: '2024-01-16 10:15:00',
        read: false
      },
      {
        id: 3,
        type: 'case',
        title: '文档已生成',
        message: '您的民事起诉状已生成完成，可前往下载',
        time: '2024-01-15 18:00:00',
        read: true
      },
      {
        id: 4,
        type: 'system',
        title: '积分奖励',
        message: '恭喜您获得50积分奖励，可在积分商城兑换礼品',
        time: '2024-01-15 15:20:00',
        read: false
      },
      {
        id: 5,
        type: 'appointment',
        title: '预约确认',
        message: '您的律师预约已确认，律师将在约定时间联系您',
        time: '2024-01-14 16:45:00',
        read: true
      },
      {
        id: 6,
        type: 'system',
        title: '系统维护通知',
        message: '系统将在今晚23:00-24:00进行维护，期间服务可能中断',
        time: '2024-01-14 12:00:00',
        read: true
      }
    ])
    
    // 过滤后的通知
    const filteredNotifications = computed(() => {
      if (activeFilter.value === 'all') {
        return notifications.value
      }
      return notifications.value.filter(notification => notification.type === activeFilter.value)
    })
    
    // 更新筛选标签计数
    const updateFilterCounts = () => {
      filterTabs.value.forEach(tab => {
        if (tab.key === 'all') {
          tab.count = notifications.value.filter(n => !n.read).length
        } else {
          tab.count = notifications.value.filter(n => n.type === tab.key && !n.read).length
        }
      })
    }
    
    // 获取通知图标
    const getNotificationIcon = (type) => {
      const iconMap = {
        case: 'fas fa-briefcase',
        appointment: 'fas fa-calendar-check',
        system: 'fas fa-cog',
        message: 'fas fa-comment'
      }
      return iconMap[type] || 'fas fa-bell'
    }
    
    // 获取筛选名称
    const getFilterName = () => {
      const filterMap = {
        all: '',
        case: '案件',
        appointment: '预约',
        system: '系统'
      }
      return filterMap[activeFilter.value] || ''
    }
    
    // 格式化时间
    const formatTime = (time) => {
      return dayjs(time).fromNow()
    }
    
    // 标记为已读
    const markAsRead = (notification) => {
      if (!notification.read) {
        notification.read = true
        updateFilterCounts()
      }
    }
    
    // 全部标记为已读
    const markAllRead = () => {
      notifications.value.forEach(notification => {
        notification.read = true
      })
      updateFilterCounts()
    }
    
    // 返回上一页
    const goBack = () => {
      router.go(-1)
    }
    
    onMounted(() => {
      updateFilterCounts()
    })
    
    return {
      activeFilter,
      filterTabs,
      notifications,
      filteredNotifications,
      getNotificationIcon,
      getFilterName,
      formatTime,
      markAsRead,
      markAllRead,
      goBack
    }
  }
}
</script>

<style scoped>
.notifications {
  min-height: 100vh;
  background: #f8f9fa;
}

/* 页面头部 */
.page-header {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.back-button {
  background: none;
  border: none;
  font-size: 18px;
  color: #374151;
  cursor: pointer;
  padding: 8px;
  margin-left: -8px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.mark-all-read {
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
}

/* 筛选标签 */
.filter-tabs {
  display: flex;
  background: white;
  padding: 0 20px;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}

.filter-tab {
  background: none;
  border: none;
  padding: 16px 0;
  margin-right: 24px;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-tab.active {
  color: #3b82f6;
  font-weight: 600;
}

.filter-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #3b82f6;
}

.count-badge {
  background: #ef4444;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
}

/* 通知列表 */
.notifications-list {
  padding: 0 20px 20px;
}

.notification-item {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.notification-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.notification-item.unread {
  background: #f0f9ff;
  border-left: 4px solid #3b82f6;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.notification-icon.case {
  background: #dbeafe;
  color: #1d4ed8;
}

.notification-icon.appointment {
  background: #f3e8ff;
  color: #7c3aed;
}

.notification-icon.system {
  background: #fef3c7;
  color: #d97706;
}

.notification-icon.message {
  background: #dcfce7;
  color: #16a34a;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.notification-message {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
  margin-bottom: 8px;
}

.notification-time {
  font-size: 12px;
  color: #9ca3af;
}

.unread-dot {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  margin-left: 12px;
  margin-top: 6px;
  flex-shrink: 0;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #374151;
}

.empty-state p {
  font-size: 14px;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .header-content {
    padding: 12px 16px;
  }
  
  .filter-tabs {
    padding: 0 16px;
  }
  
  .filter-tab {
    margin-right: 20px;
  }
  
  .notifications-list {
    padding: 0 16px 16px;
  }
  
  .notification-item {
    padding: 12px;
  }
  
  .notification-icon {
    width: 36px;
    height: 36px;
  }
}
</style>
